<template>
  <div style="padding-top: 1.3rem;padding-bottom:1rem;">
    <div>
      <TopNav title="LevelDistributionPage.tdbb" show_left="true"></TopNav>
      <div class="time search">
        <p @click="handleClickDateBeg">{{selectDate[0]}}</p>
        <span>{{ $t('LevelDistributionPage.z') }}</span>
        <p @click="handleClickDateEnd">{{selectDate[1]}}</p>
        <button @click="handleClickSearch">{{ $t('LevelDistributionPage.ss') }}</button>
      </div>
      <div class="report">
        <div class="lf"><p>{{ $t('LevelDistributionPage.tdye') }}（{{ $t('LevelDistributionPage.y') }}）</p>
          ￥{{stat.money}}
        </div>
        <div class="rg red"><p>{{ $t('LevelDistributionPage.tdls') }}（{{ $t('LevelDistributionPage.y') }}）</p>
          ￥{{stat.water}}
        </div>
        <div class="lf"><p>{{ $t('LevelDistributionPage.tdzcz') }}（{{ $t('LevelDistributionPage.y') }}）</p>
          ￥{{stat.recharge_total}}
        </div>
        <div class="rg red"><p>{{ $t('LevelDistributionPage.tdztx') }}（{{ $t('LevelDistributionPage.y') }}）</p>
          ￥{{stat.withdraw_total}}
        </div>
        <div class="d"><p>{{ $t('LevelDistributionPage.scrs') }}</p>
          {{stat.recharge_first}}{{ $t('LevelDistributionPage.r') }}
        </div>
        <div class="d"><p>{{ $t('LevelDistributionPage.ztrs') }}</p>
          {{stat.first_sub_cnt}}{{ $t('LevelDistributionPage.r') }}
        </div>
        <div class="d"><p>{{ $t('LevelDistributionPage.tdrs') }}</p>
          {{stat.cnt}}{{ $t('LevelDistributionPage.r') }}
        </div>
        <div class="d"><p>{{ $t('LevelDistributionPage.xzrs') }}</p>
          {{stat.new_cnt}}{{ $t('LevelDistributionPage.r') }}
        </div>
      </div>
      <div style="text-align: center;" v-if="loading">
        <van-loading v-if="loading">{{ $t('LevelDistributionPage.jzz') }}...</van-loading>
      </div>
      <div class="nav">
        <button @click="handleClickTab(item)" v-for="(item, index) in subList" :class="item.active?'on':''" class="mint-button mint-button--default mint-button--normal btn">
          <label class="mint-button-text">{{item.title}} ({{item.recharge}}/{{item.data.length}})</label>
        </button>
      </div>
      <div class="page-tab-container hot">
        <div class="mint-tab-container page-tabbar-tab-container">
          <div class="mint-tab-container-wrap">
            <div class="mint-tab-container-item" v-for="item in subList" v-if="item.active">
              <ul class="sublist">
                <li v-for="subitem in item.data">
                  {{subitem.username}} {{ $t('LevelDistributionPage.kyye') }}: <span style="color:red;">{{subitem.balance.toFixed(2)}}</span>
                  <span> {{subitem.level}}</span>
                </li>
              </ul>
              <div class="no_more">{{ $t('LevelDistributionPage.mysj') }}</div>
            </div>
          </div>
        </div>
      </div>
      <nut-datepicker
        :is-visible="showSelectDate"
        type="date"sassa
        title="$t('LevelDistributionPage.qxzrq')"
        startDate="2020-03-01"
        :endDate="todayDate"
        :defaultValue="todayDate"
        :is-show-chinese="false"
        @close="switchPicker('isVisible')"
        @choose="setChooseValue"
      >
      </nut-datepicker>
    </div>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";
import { Tab, Tabs } from 'vant';
import 'vant/lib/tab/style';
import 'vant/lib/tabs/style';
import Vue from 'vue';
Vue.use(Tab);
Vue.use(Tabs);

export default {
  name: 'LevelDistributionPage',
    components: {MainNav,TopNav,EmptyBox},
    data () {
    return {
      msg: 'Hello order',
        loading:false,
        data:[],
        showSelectDate: false,
        curr_date: '',
        todayDate: '',
        totalForL1: 0,
        totalForL2: 0,
        activeName: '',
        selectDate: [
            '2020-02-01',
            '2020-12-31'
        ],
        currSelectIndex: 0,
        subList: [
            {
                'title':this.$t('LevelDistributionPage.yj'),
                'active': true,
                'recharge':0,
                'data':[]
            },
            {
                'title':this.$t('LevelDistributionPage.ej'),
                'active': false,
                'recharge':0,
                'data':[]
            },
            {
                'title':this.$t('LevelDistributionPage.sj'),
                'active': false,
                'recharge':0,
                'data':[]
            },
        ],
        stat:{
          cnt:0,
          money:0,
          new_cnt:0,
          recharge_cnt: 0,
          recharge_total: 0,
          withdraw_total: 0,
          recharge_first: 0,
          water: 0,
          task_money: 0,
          first_sub_cnt: 0,
        }
    }
  },
    methods:{
        handleClickDateBeg(){
            this.currSelectIndex = 0;
            this.showSelectDate = true;
        },
        handleClickDateEnd(){
            this.currSelectIndex = 1;
            this.showSelectDate = true;
        },
        shiftTab(index){

        },
        handleClickTab(item){
            for(let i = 0; i < this.subList.length; i++){
                this.subList[i].active = false;
            }
            item.active = true;
        },
        getData(){
            this.loading = true;
            let url = this.$api_url.distributions+"?date_beg="+this.selectDate[0]+'&date_end='+this.selectDate[1];
            this.$axios.get(url).then((res)=>{
                let data = res.data;
                this.subList[0].data = data.L1;
                this.subList[1].data = data.L2;
                this.subList[2].data = data.L3;
                this.subList[0].recharge = data.L1_recharge;
                this.subList[1].recharge = data.L2_recharge;
                this.subList[2].recharge = data.L3_recharge;
                this.stat.cnt = data.cnt;
                this.stat.money = data.money;
                this.stat.recharge_cnt = data.recharge_cnt;
                this.stat.new_cnt = data.new_cnt;
                this.stat.recharge_total = data.recharge_total;
                this.stat.withdraw_total = data.withdraw_total;
                this.stat.recharge_first = data.recharge_first ;
                this.stat.water = data.water;
                this.stat.task_money = data.task_money;
                this.stat.first_sub_cnt = data.first_sub_cnt;
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.loading = false;
            })
        },
        handleClickSelectDate(){
            this.showSelectDate = true;
        },
        switchPicker(){
            this.showSelectDate = false;
        },
        setChooseValue(val){
            this.selectDate[this.currSelectIndex] = val[3];
         },
        handleClickSearch() {
            this.getData();
        }
    },
    mounted() {
      this.getData();
    },
    created() {
      let day2 = new Date();
        day2.setTime(day2.getTime());
      let s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
      this.todayDate = s2;
      this.selectDate = [
        s2,
        s2
      ];
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .time{
    overflow: hidden;
    padding: .266667rem .4rem;
    line-height: .8rem;
    border-bottom: .013333rem solid #eee;
  }
  .time p{
    float: left;
    background: #f2f2f2;
    border-radius: .4rem;
    padding: 0 .666667rem;
    font-size: .32rem;
  }
  .time span{
    float: left;
    padding: 0 .266667rem;
    font-size: .373333rem;
  }
  .time p{
    float: left;
    background: #f2f2f2;
    border-radius: .4rem;
    padding: 0 .666667rem;
    font-size: .32rem;
  }
  .search button{
    background: #ff7614 url(/static/icons/search.png) no-repeat .266667rem;
    background-size: .4rem;
    border-radius: .4rem;
    padding: 0 .266667rem 0 .8rem;
    line-height: .8rem;
    float: right;
    color: #fff;
    font-size: .346667rem;
  }
  .report{
    border-top: .013333rem solid #eee;
    font-size: .48rem;
    display: inline-block;
  }
  .report div{
    width: 50%;
    height: 1.706667rem;
    float: left;
    text-align: left;
    background: #fff;
    padding: .266667rem;
    border-right: .013333rem solid #eee;
    border-bottom: .013333rem solid #eee;
  }
  .report p{
    color: #9c9c9c;
  }
  .report .lf{
    text-align: left;
  }
  .red{
    background: #f9700f;
    color: green;
  }
  .report .rg{
    text-align: right;
  }
  .report .lf{
    text-align: left;
  }
  .report .d{
    font-size: .426667rem;
    color: #ff575c;
  }
  .report .d p{
    font-size: .426667rem;
    color: #000;
  }
  .nav{
    overflow: hidden;
  }
  .mint-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .053333rem;
    border: 0;
    box-sizing: border-box;
    color: inherit;
    display: block;
    font-size: .24rem;
    height: .546667rem;
    outline: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .mint-button--default {
    color: #656b79;
    background-color: #f6f8fa;
    box-shadow: 0 0 0.013333rem #b8bbbf;
  }
  .mint-button--normal, .mint-button--small {
    display: inline-block;
    padding: 0 .16rem;
  }
  .nav .btn{
    width: 33.333333%;
    text-align: center;
    color: #333;
    font-size: .373333rem;
    height: 1.066667rem;
    line-height: 1.066667rem;
    display: block;
    background: transparent;
    float: left;
    border-bottom: .053333rem solid #ccc;
  }
  .nav .btn.on{
    color: #be1204;
    border-bottom: .053333rem solid #be1204;
  }
  .mint-button:after {
    background-color: #000;
    content: " ";
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
  }
  .hot{
    background: #fff;
  }
  .mint-tab-container {
    overflow: hidden;
    position: relative;
  }
  .mint-navbar, .mint-tab-container-wrap {
    display: -ms-flexbox;
    display: flex;
  }
  .mint-tab-container-item {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
  }
  .hot ul {
    overflow: hidden;
    border-left: .013333rem solid #eee;
    border-top: .013333rem solid #eee;
  }
  .no_more {
    font-size: .24rem;
    line-height: 1.466667rem;
    text-align: center;
    color: #919191;
  }

  .sublist li{
    text-align: left;
    padding: 0.2rem;
    font-size: 0.4rem;
  }



</style>
